<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/antd-mobile/2.1.10/antd-mobile.min.css" />
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <style>
    #circle_box {
      width: 150px;
      height: 150px;
      margin: 0px 0 0 0px;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 0px 11px 1px rgba(230, 230, 230, 0.9);
    }

    #circle_position {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    span::before {
      position: absolute;
      height: 39%;
      content: '\f130';
      overflow: hidden;
      color: #1c7cd4;
      z-index: 999;
      font-size: 85px;
    }

    #microphone {
      font-size: 85px;
      color: #0e31fa;
    }

    #circle_box.shame {
      background-color: #cac7c7;
      height: 0px;
    }

    #circle_box.animation {
      animation: slideshow 1.5s linear infinite;
    }

    @keyframes slideshow {
      0% {
        width: 200px;
      }

      30% {
        width: 150px;
      }

      90% {
        width: 100px;
      }

      120% {
        width: 150px;
      }

      180% {
        width: 200px;
      }
    }

    .ant-drawer-body {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.min.js"></script>
  <script src="https://cdn.bootcss.com/antd-mobile/2.1.10/antd-mobile.min.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <script type="text/babel">
    const { Component, useState, useEffect, useRef } = React
    const { Button, Drawer } = antd

    function SpeechBox(props) {
      const btnElem = useRef()
      const [position, setPosition] = useState({ clientX: 0, clientY: 0 })
      const [isChangeBackground, setIsChangeBackground] = useState(false)
      const [isOuterSpeechBox, setIsOuterSpeechBox] = useState(false)
      const [isChangeMask, setIsChangeMask] = useState(true)
      useEffect(() => {
        btnElem.current.addEventListener('touchstart', touchstart, {
          passive: false
        })
        btnElem.current.addEventListener('touchmove', touchmove, {
          passive: false
        })
        btnElem.current.addEventListener('touchend', touchend, {
          passive: false
        })
        return () => {
          btnElem.current &&
            btnElem.current.removeEventListener('touchstart', touchstart, {
              passive: false
            })
          btnElem.current &&
            btnElem.current.removeEventListener('touchmove', touchmove, {
              passive: false
            })
          btnElem.current &&
            btnElem.current.removeEventListener('touchend', touchend, {
              passive: false
            })
        }
      })
      //在 115+165 范围内是
      function setPositionfn(event) {
        const clientX = event.targetTouches[0].clientX
        const clientY = event.targetTouches[0].clientY
        setPosition({ clientX, clientY })
      }
      const touchstart = function (event) {
        event.preventDefault() //阻止浏览器默认行为
        setPositionfn(event)
        const { clientX, clientY } = position
        setIsChangeBackground(true)
      }
      const touchmove = function (event) {
        event.preventDefault() //阻止浏览器默认行为
        const { clientX, clientY } = position
        if (
          clientX > 110 &&
          clientX < 265 &&
          clientY > 458 &&
          clientY < 625
        ) {
          console.log('松开手,发送信息')
          setIsChangeBackground(true)
        } else {
          console.log('松开手,取消发送')
          setIsChangeBackground(false)
          setIsOuterSpeechBox(true)
        }
        setPositionfn(event)
      }
      const touchend = function (event) {
        event.preventDefault()
        setIsChangeBackground(false)
        setIsChangeMask(false)
        setIsOuterSpeechBox(false)
      }

      function handleSpeech(e) {
        e.stopPropagation()
        e.preventDefault()
      }
      const onClose = () => {
        props.onClose()
      }
      return (
        <Drawer
          placement="bottom"
          closable={true}
          onClose={onClose}
          visible={props.visible}
          mask={isChangeMask}
        >
          <div className="animate__animated animate__fadeInUp">
            <Button
              ref={btnElem}
              type="default"
              id="circle_box"
              className={
                isChangeBackground
                  ? 'shame animation'
                  : isOuterSpeechBox
                    ? 'shame'
                    : ''
              }
              onClick={handleSpeech}
              shape="circle"
            >
              <span className="fa fa-microphone">
                <i
                  className="fa fa-microphone"
                  id="microphone"
                  aria-hidden="true"
                ></i>
              </span>
            </Button>
          </div>
        </Drawer>
      )
    }

    function Home() {
      const [visible, setVisible] = useState(false)
      function handleClick() {
        setVisible(true)
      }
      function onClose() {
        setVisible(false)
      }
      return (
        <div>
          <Button type="primary" onClick={handleClick}>
            show
            </Button>
          <h3 style={{ textAlign: "center" }}>请用手机端查看</h3>
          {
            visible && (
              <SpeechBox onClose={onClose} visible={visible}></SpeechBox>
            )
          }
        </div >
      )
    }
    const App = (
      <div>
        <Home></Home>
      </div>
    )
    ReactDOM.render(App, document.getElementById('root'))
  </script>
</body>

</html>